  <template>
  	<view class="container">
  		<view class="fix_menu">
  			<view class="item" v-for="(item,index) in tab" :key="index" @click="get_list(item.score)">
  				<text :class="score == item.score ? 'active' : ''">{{item.title}}({{ item.num }})</text>
  			</view>
  		</view>
  		<view class="comment_list">
  			<view class="comment_box">
  				<view v-if="list.length">
  					<view class="u-page" v-for="(item, index) in list" :key="index">
  						<view class="u-demo-block">
  							<view class="u-demo-block__content">
  								<view class="album">
  									<image :src="item.avatarurl" style="width: 30px;height: 30px;border-radius:100%">
  									</image>
  									<view class="album__content">
  										<view class="user">
  											<view class="fl">
  												<u--text
  													:text="item.user_nickname ? item.user_nickname : item.nick_name"
  													size="14" color="#666"></u--text>
  											</view>
  											<view class="time">{{ item.created_date }}</view>
  										</view>
  										<view class="star">
  											<up-rate active-color="#ff7500" gutter="0" v-if="item.score == 30" :count="count" v-model="value[0]" readonly></up-rate>
  											<up-rate active-color="#ff7500" gutter="0" v-if="item.score == 20" :count="count" v-model="value[1]" readonly></up-rate>
  											<up-rate active-color="#ff7500" gutter="0" v-if="item.score == 10" :count="count" v-model="value[2]" readonly></up-rate>
  									
  										</view>
  										<view class="spec">
  											<u--text size="12" color="#ccc" :text="'规格：' + item.spec"></u--text>
  										</view>
  										<view class="content">{{ item.content }}</view>
  										<view class="images" v-if="item.comment_images.length">
  											<u-album :urls="item.comment_images"></u-album>
  										</view>
  									</view>
  								</view>
  							</view>
  						</view>
  					</view>
  				</view>
  				<view class="u-empty" v-else>
  					<u-empty text="暂无数据" icon="https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250311/0057423001741660320.png"></u-empty>
  				</view>
  			</view>
  		</view>
  	</view>
  </template>

  <script setup>
  	import {
  		ref
  	} from 'vue';
  	import {
  		onLoad,
  		onShow
  	} from '@dcloudio/uni-app';
  	import {
  		get_comment_list
  	} from "@/api/comment.js"

  	const count = ref(5);
  	const value = ref([1, 3, 5]);
  	const goods_id = ref(null);
	const list = ref([]);
  	const score = ref(0);
  	const tab = ref([{
  			title: '全部',
  			score: 0,
  			num: 0
  		},
  		{
  			title: '好评',
  			score: 10,
  			num: 0
  		},
  		{
  			title: '中评',
  			score: 20,
  			num: 0
  		},
  		{
  			title: '差评',
  			score: 30,
  			num: 0
  		}
  	])

  	onLoad((option) => {
  		goods_id.value = option.goods_id
  	})

  	onShow(() => {
  		get_list(score.value);
  	})

  	//获取列表
  	function get_list(scoreVal) {
  		score.value = scoreVal;
  		get_comment_list({ goods_id: goods_id.value, score: scoreVal }).then(res => {
  			let data = res.data;
  			list.value = data;
			tab.value[0].num = data.count.sum;
			tab.value[1].num = data.count.good;
			tab.value[2].num = data.count.medium;
			tab.value[3].num = data.count.negative;
			list.value = data.res;
  		})
  	}
  </script>

  <style lang="scss" scoped>
  	.fix_menu {
  		width: 100%;
  		text-align: center;
  		overflow: hidden;
  		border-bottom: 1px solid #eee;
  		background-color: #fff;
  		position: fixed;
  		padding: 30rpx 0 0;
  		/* #ifndef H5 */
  		top: 0;
  		/* #endif */
  		left: 0;
  		z-index: 100;

  		.item {
  			float: left;
  			width: 25%;
  			color: #333;

  			text {
  				border-bottom: 2px solid transparent;
  				display: table;
  				padding-bottom: 10rpx;
  				margin: auto;
  			}

  			.active {
  				color: #f00;
  				border-bottom: 2px solid #F00;
  			}
  		}
  	}

  	.fl {
  		float: left;
  	}

  	.fr {
  		float: right;
  	}
	
	.comment_list{
		margin-top: 50rpx;
		padding: 30rpx;
		.u-page{
			background-color: #fff;
			border-radius: 10px;
			margin-bottom: 20rpx;
			.album__content {
				width: 570rpx;
			}
		}
	}
  </style>